<template>
    <view>
		<view class="list-cell" v-for="(cell, index) in list" :key="index"  @click="selectHandle(cell)">
		    <view class="name">
		        <view class="role">{{ cell.productName }}</view>
		    </view>
		    <view class="radio-box">
		        <label class="radio">
		            <radio :value="cell.userId" :checked="cell.id == tempObj.mainProducts" />
		        </label>
		    </view>
		</view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            params: {
                pageNum: 1,
                pageSize: 20
            },
			list: [],
            tempObj: {
                mainProducts: null,
                mainProductsName: null
            }
        }
    },
    onLoad: function(option) {

        this.getData()
		
        const eventChannel = this.getOpenerEventChannel();
		let that = this
         // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('emitDataHandle', function(data) {
            that.tempObj = data.data
        })
    },
    methods: {
        getData() {
            this.$http.get('/app/product/listAll', this.params).then(res => {
				if (res.code == 200) {
					this.list = res.data
				} 
			})
        },
        selectHandle(e) {
            this.tempObj.mainProducts = e.id
			this.tempObj.mainProductsName = e.productName
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('someEvent', {data: this.tempObj});
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
        align-items: center;
        .avatar {
            margin-right: 20rpx;
        }
        .name {
            flex: 1;
            .role {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }
            .dept {
                font-size: 28rpx;
                color: rgba(103, 117, 133, 1);
            }
        }

	}
    /deep/.u-border-bottom {
            border: none;
        }
</style>